<template>
  <el-form-item label="员工" class="employee-select-item">
    <el-select
      v-model="selectedId"
      filterable
      placeholder="请选择员工"
      @change="onChange"
      style="width: 100%"
    >
      <el-option
        v-for="item in employeeList"
        :key="item.id"
        :label="item.name"
        :value="item.id"
      />
    </el-select>
  </el-form-item>
</template>

<script setup lang="ts">
import { ref, watch, onMounted } from 'vue'

// 类型定义
interface EmployeeItem {
  id: number | string
  name: string
}

const props = defineProps<{
  employeeId: number | string | undefined
  employeeName: string | undefined
}>()
const emits = defineEmits(['update:employeeId', 'update:employeeName'])

const selectedId = ref<number | string | undefined>(props.employeeId)
const employeeList = ref<EmployeeItem[]>([])

// 模拟员工数据，实际可通过API获取
const fetchEmployeeList = async () => {
  // TODO: 替换为实际API
  employeeList.value = [
    { id: 1, name: '张三' },
    { id: 2, name: '李四' },
    { id: 3, name: '王五' },
  ]
}

const onChange = (val: number | string) => {
  const emp = employeeList.value.find(e => e.id === val)
  emits('update:employeeId', val)
  emits('update:employeeName', emp ? emp.name : '')
}

watch(() => props.employeeId, (val) => {
  selectedId.value = val
})

onMounted(() => {
  fetchEmployeeList()
})
</script>

<style scoped>
.employee-select-item {
  width: 100%;
}
</style> 